<template>
  <div class="">
    <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
            <a data-v-303c7c70="" href="#item1mobile" class="mui-control-item mui-active" @click="getimglist(-1)">
							全部
						</a>
						<a class="mui-control-item" href="#item1mobile" v-for="(item, index) in typelist" :key="index" @click="getimglist(item.id)" >
							{{item.typename}}
						</a>
					
					</div>
				</div>

			</div>
      <div id="container" class="mui-card" v-for="(item, index) in imglist" :key="index">
        <router-link :to="'/home/tukuinfo/'+item.id" class="imgbox" tag="div">
          <img :src="item.litpic" :alt="item.title" v-lazy.container="item.litpic">
        </router-link>
        <div class="description">{{item.description}}</div>

			</div>
      <mt-button v-show="flag" type="danger" size="large" plain @click="getmore">加载更多</mt-button>
      <mt-button v-show="flag1" type="danger" size="large" plain  >没有更多了</mt-button>

    <h3>做完这个不做了，水平太差，代码太乱，bug太多,接口自己不会做<br/>（〒▽〒）</h3>

   
  </div>
</template>

<script>

import mui from '../../lib/mui/js/mui.js'
export default {
  data() {
    return {
      typelist:[],
      imglist:[],
      index:1,
      count:0,
      flag:false,
      flag1:false,
      current:-1,
    };
  },
  mounted: function() {
    mui.init();
  },
  methods: {
    getarctype(){
      this.$http.get("http://192.168.0.104/linshi/api/get_arctype.php?topid=6").then((res) => {
       if(res.status ==200){
         this.typelist=res.body;
       // console.log(res)
       }
      });
    },
    getimglist(id){
      this.$http.get("http://192.168.0.104/linshi/api/get_imglist.php?typeid="+id+"&page="+this.index).then((res) => {
       if(res.status ==200){
         this.count=parseInt(res.body.count);
         this.imglist=res.body.list;
       console.log(this.imglist)
       }
       if (this.imglist.length == parseInt(this.count)) {
            this.flag = false;
            this.flag1 = true;
          } else {
            this.flag = true;
          }
      });
    },
    getmore(id){
      this.index++;
      this.getimglist(this.current)
    }
  },
  components: {},
  created() {
    this.getarctype()
    this.getimglist(-1)
    this.$emit("changTit",true,'美女图片');
  },
  watch: {
    'imglist':function(val,oldval){
        if(val[0].typeid!= -1){
          this.current=val[0].typeid  
        }else{
           this.current=-1  
        }
    }
  },
};
</script>

<style lang="scss" scoped>
.mui-card{
  position: relative;
  .imgbox{
    height: 60vw;overflow: hidden;
    img[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
      }
  }
.description{
  position:absolute;left:0;    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    background: rgba(0,0,0,0.5);
    color:#fff;padding:10px;
}
}
.description{
  font-size: 12px;
}
</style>
